import React, {Component} from "react";
import {Link} from "react-router-dom";
import { Menu, Button } from 'antd';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
    SearchOutlined
} from '@ant-design/icons';

const { SubMenu } = Menu;

export default class LeftNav extends Component {
    state = {
        collapsed: false,
        default: "17%",
        stock: window.location.href.split('?')[1].split('=')[1]
    };

    toggleCollapsed = () => {
        this.props.location.state = !this.state.collapsed
        this.setState({
            collapsed: !this.state.collapsed,
        });
        if(this.state.collapsed){
            this.setState({
                default: "17%"
            })
        }else{
            this.setState({
                default: "6%"
            })
        }
    };

    render() {
        return (
            <div style={{width:this.state.default, height: "100vh", background: "#001529", float: "left"}}>
                <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </Button>
                <Link to={"/"}><SearchOutlined style={{marginLeft:"5%", fontSize :"1.5vw", color:"white"}}/></Link>
                {
                    this.state.collapsed === false ? (
                        <div>
                            <div style={{width:"5vw", height:"10vh", borderRadius:"50%", margin:"2vh auto", background:"white"}}/>
                            <p style={{color:"white", textAlign:"center", marginBottom:"3vh"}}><a href={"#/Login"}>您好，请登录</a></p>
                        </div>

                    ):null
                }
                <Menu
                    defaultOpenKeys={['sub1','sub2']}
                    mode="inline"
                    theme="dark"
                    inlineCollapsed={this.state.collapsed}
                >
                    <Menu.Item key="1" icon={<PieChartOutlined />} onClick={()=>window.location.href="#/Overview?stock="+this.state.stock}>
                        总体概括
                    </Menu.Item>
                    <SubMenu key="sub1" icon={<MailOutlined />} title="财务分析">
                        <Menu.Item key="2" onClick={()=>window.location.href="#/Profit?stock="+this.state.stock}>盈利能力</Menu.Item>
                        <Menu.Item key="3" onClick={()=>window.location.href="#/Growing?stock="+this.state.stock}>成长能力</Menu.Item>
                        <Menu.Item key="4" onClick={()=>window.location.href="#/Manufacturing?stock="+this.state.stock}>运营能力</Menu.Item>
                        <Menu.Item key="5" onClick={()=>window.location.href="#/Debt?stock="+this.state.stock}>偿债能力</Menu.Item>
                    </SubMenu>
                    <Menu.Item key="6" icon={<ContainerOutlined />} onClick={()=>window.location.href="#/Risk?stock="+this.state.stock}>
                        风险规避
                    </Menu.Item>
                    <Menu.Item key="7" icon={<DesktopOutlined />} onClick={()=>window.location.href="#/Technology?stock="+this.state.stock}>
                        技术指标
                    </Menu.Item>
                    <SubMenu key="sub2" icon={<AppstoreOutlined />} title="资金概况">
                        <Menu.Item key="8" onClick={()=>window.location.href="#/Fund_1?stock="+this.state.stock}>资金统计分析1</Menu.Item>
                        <Menu.Item key="9" onClick={()=>window.location.href="#/Fund_2?stock="+this.state.stock}>资金统计分析2</Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}